<template>
    <div class="loginPage">
        <div class="logincontainer">
        <div class="top_box">
            <div class="color_line">
                <div class="box1"></div>
                <div class="box2"></div>
                <div class="box3"></div>
            </div>
        </div>
        <el-form class="loginform" :model="loginModel" ref="form" :rules="rules" label-width="35px" :inline="false" size="large">
            <el-form-item>
                <div class="loginTitle">登录</div>
            </el-form-item>
            <el-form-item prop="username">
                <el-input placeholder="请输入账号" v-model="loginModel.username"></el-input>
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" placeholder="请输入密码" v-model="loginModel.password"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="commit">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
    </div>
</template>

<script setup lang="ts">
import { FormInstance } from 'element-plus';
import { reactive, ref } from 'vue';
import { loginApi } from '@/api/user/index';
import { userStore } from '@/store/user/index';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = userStore()
//表单的ref属性
const form = ref<FormInstance>()
//表单绑定的对象
const loginModel = reactive({
    username:'',
    password:''
})
//表单验证规则
const rules = reactive({
    username:[{required:true,message:'请填写账号',trigger:'change'}],
    password:[{required:true,message:'请填写密码',trigger:'change'}],
});
//登录提交
const commit = ()=>{
    form.value?.validate(async(valid)=>{
        if(valid){
            let res = await loginApi(loginModel)
            console.log(res)
            store.setUserId(res.data.userId)
            router.push({path:'/home'})
        }
    })
}
</script>

<style lang="scss"scoped>
.loginPage{
    height: 100%;
    //background-image: url("../../assets/背景gx.png");
    background-color: #c9c9c9;
    display: flex;
    justify-content: center;
    align-items: center;
.logincontainer{
    height: 320px;
    width: 620px;
    margin-bottom: 130px;
    .loginform{
        height: 320px;
        width: 620px;
        padding: 20px 35px;
        background-color: #f5eedb;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
    .top_box{
        display: flex;
        align-items: center;
        background-color: #1d1d1d;
        height: 70px;
        width: 690px;
        border-top-left-radius: 20px;
        border-top-right-radius: 20px;
    }
        .color_line{
            display: flex;
            margin-left: 40px;
        }
        .box1{
            width: 60px;
            height: 5px;
            background-color: #8cbfb0;
        }
        .box2{
            width: 60px;
            height: 5px;
            background-color: #efa836;
        }
        .box3{
            width: 60px;
            height: 5px;
            background-color: #9c2c26;
        }
    .loginTitle{
        color: #363636;
        font-weight: 700;
        font-size: 24px;
    }
    }
}
</style>